<template>
    <div>
        <van-cell-group>
            <van-cell :title="itemTitle" icon="wap-nav" />
        </van-cell-group>
        <van-row>
            <van-col span="12" v-for="item in list" :key="item.id" @click.native="showDetail(item.id)">
                <div class="movie-item">
                    <div class="movie-poster">
                        <img :src="item.images.small">
                    </div>
                    <p>
                        {{item.title|substr(6)}}&nbsp;&nbsp;
                        <van-tag plain type="danger">{{item.year}}</van-tag>
                    </p>
                    <p>
                        <van-tag mark type="danger" v-for="val in item.genres" :key="val">{{val}}</van-tag>
                    </p>

                </div>
            </van-col>
        </van-row>
    </div>
</template>
<script>
import { getMovieList, getMockList } from "../../api/api.js";
import Vue from "vue";
//单元格组件
import { Cell, CellGroup } from "vant";
//星评组件
import { Rate } from "vant";
//布局组件
import { Row, Col } from "vant";
//标签组件
import { Tag } from "vant";
Vue.use(Row)
    .use(Col)
    .use(Tag)
    .use(Rate)
    .use(Cell)
    .use(CellGroup);
export default {
    data() {
        return {
            itemTitle: "即将上映",
            list: []
        };
    },
    created() {
        getMockList("coming_soon").then(res => {
            this.list = res;
        });
    },
    methods:{
         showDetail(movieId) {
            this.$router.push({
                path: "/moviedetail",
                query: { id: movieId }
            });
        }
    }
};
</script>
<style lang="less">
</style>


